<template>
    <section>
        <div class="panel">
            <div class="panel-head" id="add"><strong><span class="el-icon-date"/>
                <span class="title">角色列表</span></strong></div>
            <el-row style="margin-top: 10px;margin-left: 10px;">
                <el-col :span="3" :offset="30">
                    <el-button type="primary" icon="edit" size="small" @click='addLabel'>新增角色</el-button>
                </el-col>
                <el-col :span="8">
                    <el-button type="primary" icon="edit" size="small" @click='addLabel2'>新增角色与资源关系</el-button>
                </el-col>
            </el-row>
            <div class="body-content">
                <el-table :data="tableData" stripe border empty-text v-loading="listLoading" element-loading-text="拼命加载中" style="width: 100%">
                    <el-table-column width='70' type="index" label="编号"/>
                    <el-table-column prop="name" label="角色名称"/>
                    <el-table-column prop="description" label="角色描述"/>
                    <el-table-column prop="createTime" label="添加时间"/>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="openResource(scope.row.autoId)">详情</el-button>
                            <el-button type="warning" size="mini" @click="editRole(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="delRole(scope.$index,scope.row.autoId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block pages paginationMargin">
                    <el-pagination background layout="prev, pager, next" :page-count="total" @current-change="handleCurrentChange"/>
                </div>
            </div>
        </div>
        <!-- 查看更多资源 -->
        <el-dialog @close='closeResour' :close-on-click-modal='closeOnClickModal' title="资源列表" width='80%' :visible.sync="dialogTableVisible">
            <el-table :data="resourceData" border>
                <el-table-column width='70' type="index" label="编号"/>
                <el-table-column prop="title" label="功能名"/>
                <el-table-column prop="uri" width='400' label="uri"/>
                <el-table-column prop="moduleName" label="模块名"/>
                <el-table-column label="操作" width='80'>
                    <template slot-scope="scope">
                        <el-button type="danger" size='mini' @click='delResour(scope.$index,scope.row.resourceId)'>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </el-dialog>
        <!-- 添加角色 -->
        <el-dialog @close='closedailog' :close-on-click-modal='closeOnClickModal' @open='opendailog' :title='dailogTitle' :visible.sync="addLabelVisible" width="35%">
            <el-form>
                <el-form-item label="角色名称" :label-width="formLabelWidth">
                    <el-input :maxlength='20' placeholder="请输入内容" v-model.trim="resource.roleName" style="width: 200px"/>
                </el-form-item>
                <el-form-item label="角色描述" :label-width="formLabelWidth">
                    <el-input :maxlength='30' placeholder="请输入内容" v-model.trim="resource.desc" style="width: 200px"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="addLabelVisible = false">取消</el-button>
                <el-button size="small" type="primary" @click="addConfirm">{{dailogBtn}}</el-button>
            </div>
        </el-dialog>
        <!-- 添加角色资源关系 -->
        <el-dialog @close='closedailog2' :close-on-click-modal='closeOnClickModal' title="新增角色与资源关系" :visible.sync="addLabelVisible2" width="40%">
            <el-form>
                <el-form-item label="角色名称" prop="title" :label-width="formLabelWidth">
                    <el-select v-model="resourceandrole.roleId" clearable placeholder="请选择" style="width: 130px">
                        <el-option v-for="item in roleoptions" :key="item.autoId" :label="item.name" :value="item.autoId"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="模块和功能" :label-width="formLabelWidth">
                    <el-select v-model="resourceandrole.resourceIds" @change="handleChange" clearable placeholder="请选择" style="width: 130px">
                        <el-option value-key="id" v-for="item in selectData" :key="item.id" :label="item.label" :value="item"/>
                    </el-select>
                </el-form-item>
                <el-checkbox-group v-model="checkedModels" @change="handleCheckedModelsChange">
                    <el-checkbox v-for="model in models" :label="model.id" :key="model.id">{{model.label}}</el-checkbox>
                </el-checkbox-group>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="addLabelVisible2 = false">取消</el-button>
                <el-button size="small" type="primary" @click="addRoleBtn">添加</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import {
    getRolesList,
    addRoleNameDesc,
    getRoleResourceByRoleId,
    getModuleAndFun,
    getRoleNameList,
    editOrDelRole,
    deleteRoleResource,
    addRoleResource
} from "../../api/api";

export default {
    data() {
        return {
            closeOnClickModal: false,
            dailogType: "",
            dailogTitle: "",
            dailogBtn: "",
            models: [],
            checkedModels: [],
            tableData: [],
            total: 0,
            resourceData: [], // 更多资源
            resourroleId: "", //roleId

            addLabelVisible: false,
            addLabelVisible2: false,
            formLabelWidth: "120px",
            listLoading: false,
            resource: {
                roleName: "",
                desc: ""
            },
            resourceandrole: {
                roleId: "",
                resourceIds: ""
            },
            selectData: [],
            roleoptions: [],

            dialogTableVisible: false,
            modelsTmp: []
        };
    },
    methods: {
        delRole(index, id) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    editOrDelRole({
                        roleId: id,
                        flag: "delete"
                    }).then(res => {
                        // 改变页面显示
                        this.tableData.splice(index, 1);
                        // 提示成功
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        editRole(role) {
            this.addLabelVisible = true;
            this.resource.roleName = role.name;
            this.resource.desc = role.description;
            this.resource.roleId = role.autoId;
            this.resource.flag = "edit";
        },
        handleCheckedModelsChange(e) {
            this.modelsTmp = e;
        },
        handleCurrentChange(val) {
            this.getlist(val);
        },
        addLabel() {
            this.dailogType = "add";
            this.addLabelVisible = true;
        },
        addLabel2() {
            this.getModule();
            this.addLabelVisible2 = true;
        },
        //打开弹窗
        opendailog() {
            this.dailogType == "add"
                ? (this.dailogTitle = "新增角色")
                : (this.dailogTitle = "修改角色");
            this.dailogType == "add"
                ? (this.dailogBtn = "保存")
                : (this.dailogBtn = "保存");
        },
        //添加角色
        addConfirm() {
            if (this.resource.roleName == "" || this.resource.desc == "") {
                this.$message({
                    showClose: true,
                    message: "信息不能为空"
                });
                return;
            }
            if (this.dailogType == "add") {
                addRoleNameDesc(this.resource).then(res => {
                    this.$message({
                        showClose: true,
                        message: "添加成功"
                    });
                    this.addLabelVisible = false;
                    this.getlist(1);
                });
            } else {
                editOrDelRole(this.resource).then(res => {
                    this.$message({
                        showClose: true,
                        message: "修改成功"
                    });
                    this.addLabelVisible = false;
                    this.getlist(1);
                });
            }
        },
        getlist(page) {
            this.listLoading = true;
            getRolesList({
                pageNum: page
            }).then(res => {
                this.listLoading = false;

                this.tableData = res.data.list;
                this.total = Math.ceil(res.data.total / 10);
            });
        },
        closedailog() {
            const resource = {
                roleName: "",
                desc: ""
            };
            this.resource = resource;
        },
        closedailog2() {
            const resourceandrole = {
                roleId: "",
                resourceIds: ""
            };
            this.resourceandrole = resourceandrole;
            this.models = [];
            this.modelsTmp = [];
            this.checkedModels = [];
        },
        closeResour() {
            this.resourceData = [];
            this.resourroleId = "";
        },
        getModule() {
            getModuleAndFun().then(res => {
                this.selectData = res.data;
            });
            getRoleNameList().then(res => {
                this.roleoptions = res.data.list;
            });
        },
        //通过roleID查询资源
        openResource(id) {
            this.dialogTableVisible = true;
            getRoleResourceByRoleId({
                roleId: id
            }).then(res => {
                this.resourroleId = id;
                this.resourceData = res.data.resourceList;
            });
        },
        //删除
        delResour(index, resid) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    deleteRoleResource({
                        roleId: this.resourroleId,
                        resourceId: resid
                    }).then(res => {
                        // 改变页面显示
                        this.resourceData.splice(index, 1);
                        // 提示成功
                        this.$message({
                            type: "success",
                            message: "删除成功!"
                        });
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        handleChange(value) {
            this.models = value.children;
        },
        //添加角色资源关联关系表
        addRoleBtn() {
            const postResourceIds = this.modelsTmp.join(",");
            if (postResourceIds == "" || this.resourceandrole.roleId == "") {
                this.$message({
                    showClose: true,
                    message: "信息不能为空"
                });
                return;
            }
            addRoleResource({
                roleId: this.resourceandrole.roleId,
                resourceIds: postResourceIds
            }).then(res => {
                this.$message({
                    showClose: true,
                    message: "添加成功"
                });
                this.addLabelVisible2 = false;
            });
        }
    },
    mounted() {
        this.getlist(1);
    }
};
</script>

<style scoped>
</style>
